<template>
  <div class="addSetMeal" style="height:100%">
    <div class="pageTitleSubTitle">
      <div class="title" @click="back"><a-icon type="left" style="margin-right: 10px"/>{{type === 1?'添加':type === 2?'修改':'查看'}}套餐</div>
      <div class="btn">
        <a-button type="primary" @click="visible = true"><a-icon type="plus" />添加商品</a-button>
      </div>
    </div>
    <div class="addData">
      <Append @sendData="getAppendData" ref="child" :appendData="configAppend" />
    </div>
    <div class="storeContent">
      <a-table
        :rowKey="record => record.id"
        :columns="columns"
        :data-source="columnsData"
        :pagination="false"
        style="width: 100%"
      >
        <span slot="picture" slot-scope="picture"><img style="width: 60px;border-radius: 2px" :src="picture" alt=""></span>
        <span slot="num" slot-scope="num"><a-input style="width:80px" type="number" v-model="num" /></span>
        <span slot="price" slot-scope="price,record" class="operation">
          <span @click="removeGoods(record)">删除</span>
        </span>
      </a-table>
      <div class="configAdd" v-if="type !== 3">
        <a-button class="modalCloseBtn" @click="back">取消</a-button>
        <a-button class="modalConfigBtn" type="primary" @click="addSetMeal">确定</a-button>
      </div>
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      width="650px"
      cancelText="关闭"
      okText="保存">
      <AppendGood v-if="visible" @sendData="getAppendGood" ref="childGood"/>
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import Append from './append'
  import AppendGood from './appendGood'
  export default {
    name:'addSetMeal',
    components:{Append,AppendGood},
    data(){
      return{
        type:1, //1添加2修改3查看
        visible:false,
        title:'添加商品',
        loading: false,
        columnsData:[],
        columns:[
          {
            title: '序号',
            dataIndex: 'good_no',
          },
          {
            title: '',
            dataIndex: 'picture',
            scopedSlots: { customRender: 'picture' }
          },
          {
            title: '商品/服务',
            dataIndex: 'name',
          },
          {
            title: '库存',
            dataIndex: 'stock',
          },
          {
            title: '数量',
            dataIndex: 'num',
            scopedSlots: { customRender: 'num' }
          },
          {
            title: '操作',
            dataIndex: 'price',
            scopedSlots: { customRender: 'price' }
          },
        ],
        configAppend:[
          {
            name:'套餐名称',
            type:'input',
            val:'',
            must:true,
            place:'请输入名称',
            key:'name',
          },
          {
            name:'套餐价格',
            type:'input',
            val:'',
            must:true,
            place:'请输入价格',
            key:'price',
          },
          {
            name:'套餐分类',
            type:'cascader',
            must:true,
            val:[],
            place:'请选择分类',
            key:['cate_id','cate_sub_id'],
            selectData:[],
          },
          {
            name:'有效期',
            type: 'aTime',
            val:'',
            long:'0',
            must: true,
            key:'period',
            place:'请输入有效期'
          }
        ]
      }
    },
    created() {
      this.getCates();
      this.type = Number(this.$route.query.type);
      if(this.$route.query.id){
        this.getDetail(this.$route.query.id)
      }
    },
    methods:{
      getDetail(id){
        this.Api.packDetail({},id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          let configItems = [];
          res.data.items.forEach(demo=>{
            demo.item.num = demo.item.stock;
            configItems.push(demo.item)
          });
          this.configAppend.forEach(item=>{
            if(item.type === 'cascader'){
              item.val = [res.data.goods_cate.id,res.data.goods_sub_cate.id]
            }else if(item.hasOwnProperty('long')){
              item.long = res.data.period == '0'?'0':'1';
              item.val = res.data.period != 0?res.data.period:'';
            }else{
              item.val = res.data[item.key]
            }
          });
          this.columnsData = configItems;
        })
      },
      getAppendGood(datas){
        datas.forEach(item=>{item.num = item.stock;this.columnsData.push(item)});
        this.visible = false
      },
      getAppendData(e){
        let goods = [];
        this.columnsData.forEach(item=>{
          let obj = {good_no:item.good_no,number:item.num};
          goods.push(obj)
        });
        e.goods = goods;
        e.commission = '';
        let info = JSON.parse(sessionStorage.getItem('search'));
        let configData = {...e,...info};
        if(this.type === 1) return this.Api.addPackages(configData).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.$router.push({path:'/setMeal'})
        });
        if(this.type === 2) return this.Api.editPackages(configData,this.$route.query.id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.$router.push({path:'/setMeal'})
        })
      },
      addSetMeal(){
        if(this.columnsData.length<=0) return this.$message.info("请添加商品");
        this.$refs.child.sendData()
      },
      modalChange(type){
        if(type === 1) return this.visible = false;
        this.$refs.childGood.sendGoods()
      },
      removeGoods(item){
        this.columnsData.forEach((demo,index) =>{
          if(item.id === demo.id){
            this.columnsData.splice(index,1)
          }
        })
      },
      back(){
        history.go(-1)
      },
      getCates(){
        this.Api.cates({type:2}).then(res=>{
          let data = res.data;
          data.forEach(item=>{
            item.label = item.name;
            item.value = item.id;
            item.children = item.child;
            item.children.forEach(demo=>{
              demo.label = demo.name;
              demo.value = demo.id;
              demo.children = demo.child;
              if(demo.children && demo.children.length<=0) delete demo.children
            })
          });
          this.configAppend.forEach(item => {
            if (item.type === 'cascader') item.selectData = data
          });
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .addSetMeal{
    .pageTitleSubTitle{
      .title{
        cursor: pointer;
      }
    }
    .storeContent{
      .configAdd{
        text-align: right;
        .ant-btn{
          margin-right: 24px;
        }
        .ant-btn:nth-last-child(1){
          margin-right: 0;
        }
      }
    }
    .addData{
      margin: 8px 0;
      background: #ffffff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      padding: 16px 24px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
</style>
